<template>
  <div class="text-[0.7rem]">
    <!-- 详情 -->
    <div class="w-full flex justify-end items-center mb-1">
      <el-button
        type="danger"
        @click="handleAbandon(props.detailForm.id)"
        v-if="detail.status == 2 && detail.inventoryCount == 0"
      >
        <el-icon><CloseBold /></el-icon>废弃
      </el-button>
      <el-button type="primary" @click="handleLog">
        <el-icon><Message /></el-icon>日志
      </el-button>
    </div>
    <table class="purchase_table">
      <tr>
        <td>采购单号</td>
        <td :colspan="2">
          {{ detail.orderCode || "" }}
        </td>
        <td>制单时间</td>
        <td :colspan="2">
          {{ $initTime(detail.createdAt * 1000, 2) || "" }}
        </td>
      </tr>
      <tr>
        <td>供应商名称</td>
        <td :colspan="2">
          {{ detail.providerName || "" }}
        </td>
        <td>供应商联系方式</td>
        <td :colspan="2">
          {{ detail.providerPhone || "" }}
        </td>
      </tr>
      <tr>
        <td>采购数量</td>
        <td :colspan="2">
          {{ detail.quantity || "" }}
        </td>
        <td>采购金额</td>
        <td :colspan="2">
          {{
            detail.totalAmount ? (detail.totalAmount / 100).toFixed(2) : "0.00"
          }}
        </td>
      </tr>
      <tr>
        <td>业务员</td>
        <td :colspan="2">
          {{ detail.businessUserName || "" }}
        </td>
        <td>采购时间</td>
        <td :colspan="2">
          {{ $initTime(detail.businessTime * 1000, 2) || "" }}
        </td>
      </tr>
    </table>

    <div class="my-3">
      <el-divider> 商品清单 </el-divider>
    </div>

    <el-table
      :data="detail.items"
      class="w-full"
      style="height: calc(100vh - 17rem)"
    >
      <el-table-column prop="goodsCode" label="商品编码" align="center" />
      <el-table-column prop="goodsTitle" label="商品名称" align="center" />
      <el-table-column prop="categoryName" label="商品类型" align="center" />
      <el-table-column prop="goodsSpecName" label="规格" align="center" />
      <el-table-column prop="priceAtOrder" label="单价(元)" align="center">
        <template #default="{ row }">
          {{ row.priceAtOrder ? (row.priceAtOrder / 100).toFixed(2) : "0.00" }}
        </template>
      </el-table-column>
      <el-table-column prop="count" label="采购数量" align="center" />
      <el-table-column
        prop="inventoryCount"
        label="已入库数量"
        align="center"
      />
      <el-table-column prop="unPutCount" label="未入库数量" align="center" />

      <el-table-column prop="amount" label="总价(元)" align="center">
        <template #default="{ row }">
          {{ handleMul(row.priceAtOrder / 100, row.count).toFixed(2) }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="open2(row)"
            v-if="detail.status == 2 && row.unPutCount != 0"
          >
            <el-icon><Edit /></el-icon>入库
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 1.日志 -->
    <el-drawer v-model="log_drawer" size="40%" title="日志" destroy-on-close>
      <LogPage :detailId="props.detailForm.id" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Decimal from "decimal.js";
import LogPage from "./LogPage.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetGlassesStorePurchaseOrderDetail,
  CancelGlassesStorePurchaseOrder,
} from "../../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  getDetail();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
});

const detail = ref({});
async function getDetail() {
  handleApiResponse(() =>
    GetGlassesStorePurchaseOrderDetail({ id: props.detailForm.id })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      detail.value = res.data.order || {};
      detail.value.items.forEach((item) => {
        item.unPutCount = item.count - item.inventoryCount || 0;
      });
    }
  });
}

// 1.日志
const log_drawer = ref(false);
const handleLog = () => {
  log_drawer.value = true;
};

// 2.废弃
const handleAbandon = (id) => {
  ElMessageBox.confirm("你确定废弃这条数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() =>
      CancelGlassesStorePurchaseOrder({
        orderId: id,
      })
    ).then((res) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        getDetail();
      }
    });
  });
};

// 两个数相乘，返回一个数值
const handleMul = (num1, num2) => {
  let num = new Decimal(num1).mul(num2).toString();
  return +num;
};
</script>

<style scoped lang="scss">
.purchase_table {
  @apply w-full text-center;

  tr {
    @apply w-full h-[2rem];
  }
  td {
    border: 0.01rem solid #e5e5e5;
  }
  td:nth-child(odd) {
    @apply w-[20%] bg-[#F5F7FA];
  }
  td:nth-child(even) {
    @apply w-[30%];
  }
}
</style>